<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>16.bootstrap的动态的标签页</title>
        <!-- bootstrap的动态功能都是依靠jquery的， 所以要引入jquery，而且要在它的前面-->
        <!-- jquery库, bootstrap依赖于jquery -->
        <script src="static/js/jquery-3.4.1.js"></script>
        <!-- bootstrap的样式 -->
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <!-- bootstrap的js -->
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container" style="margin-top: 10px">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <span class="lead text-danger"> Bootstrap的动态的标签页 </span><br/>
                    <!-- 基本的静态的标签页 -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#">主页</a></li>
                        <li><a href="#">新闻</a></li>
                        <li><a href="#">关于</a></li>
                    </ul>
                </div>
            </div>

            <hr/>
            <div class="row">
                <span class="lead text-danger"> Bootstrap的动态的标签页 </span><br/>
                <!-- 标签页 -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#bajiuwenyue" data-toggle="tab">把酒问月</a></li>
                    <li><a href="#qiusi" data-toggle="tab">秋思</a></li>
                    <li><a href="#chunsi" data-toggle="tab">春思</a></li>
                    <li><a href="#duangexin" data-toggle="tab">短歌行</a></li>
                </ul>

                <!-- tab页面内容 -->
                <div class="tab-content">
                    <div class="tab-pane active" id="bajiuwenyue">
                        <div class="text-body text-info">
                            青天有月来几时，我今停杯一问之：<br/>
                            人攀明月不可得，月行却与人相随？<br/>
                            皎如飞镜临丹阙，绿烟灭尽清辉发？<br/>
                            但见宵从海上来，宁知晓向云间没？<br/>
                            白兔捣药秋复春，嫦娥孤栖与谁邻？<br/>
                            今人不见古时月，今月曾经照古人。<br/>
                            古人今人若流水，共看明月皆如此。<br/>
                            唯愿当歌对酒时，月光长照金樽里。<br/>
                        </div>
                    </div>
                    <div class="tab-pane" id="qiusi">
                        <div class="text-body text-danger">
                            春阳如昨日，碧树鸣黄鹂。<br/>
                            芜然蕙草暮，飒尔凉风吹。<br/>
                            天秋木叶下，月冷莎鸡悲。<br/>
                            坐愁群芳歇，白露凋华滋。<br/>
                        </div>
                    </div>
                    <div class="tab-pane" id="chunsi">
                        <div class="text-body text-success">
                            燕草如碧丝，秦桑低绿枝。<br/>
                            当君怀归日，是妾断肠时。<br/>
                            春风不相识，何事入罗帏。<br/>
                        </div>
                    </div>
                    <div class="tab-pane" id="duangexin">
                        <div class="text-body text-secondary">
                            白日何短短，百年苦易满。<br/>
                            苍穹浩茫茫，万劫太极长。<br/>
                            麻姑垂两鬓，一半已成霜。<br/>
                            天公见玉女，大笑亿千场。<br/>
                            吾欲揽六龙，回车挂扶桑。<br/>
                            北斗酌美酒，劝龙各一觞。<br/>
                            富贵非所愿，与人驻颜光。<br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

